<template>
  <div style="background-color:#f5f5f5">
    <div class="g-bd g-top">
      <div class="tp-l">
        <h2 class="tpl-title">云音乐特色榜</h2>
        <ul>
          <li @click="gotoTop(item.id)" :class="['tp-mine', this.id == item.id ? 'avtive': '']"
            v-for="item in characteristicList" :key="item.id">
            <div class="tp-item">
              <a :href="'http://localhost:8080/#/Home/toplist?id=' + item.id" class="avatar">
                <img :src="item.coverImgUrl + '?param=40y40'">
                <span href="javascript:;" class="msk"></span>
              </a>
            </div>
            <div class="name">
              <p>{{item.name}}</p>
              <p style="color:#999999;">{{item.updateFrequency}}</p>
            </div>
          </li>
        </ul>
        <h2 class="tpl-title tp-2">全球媒体榜</h2>
        <ul>
          <li @click="gotoTop(item.id)" :class="['tp-mine', this.id == item.id? 'avtive': '']" v-for="item in mediaList"
            :key="item.id">
            <div class="tp-item">
              <a :href="'http://localhost:8080/#/Home/toplist?id=' + item.id" class="avatar">
                <img :src="item.coverImgUrl + '?param=40y40'">
                <span href="javascript:;" class="msk"></span>
              </a>
            </div>
            <div class="name">
              <p>{{item.name}}</p>
              <p style="color:#999999;">{{item.updateFrequency}}</p>
            </div>
          </li>
        </ul>
      </div>
      <div class="tp-r">
        <div class="g-wrap tp-hd">
          <div class="l-cover">
            <img :src="topDetailList.coverImgUrl + '?param=150y150'" alt="">
            <a href="javascript:;" class="msk"></a>
          </div>
          <div class="r-count">
            <div class="r-hd">
              <h2>{{topDetailList.name}}</h2>
            </div>
            <div class="update">
              <i class="icon t-icon"></i>
              <span style="padding-left:6px;color:#666;">最近更新：{{updateTime}}</span>
            </div>
            <div class="btns">
              <a href="javascript:;" class="btn-2 btn-play" @click="switchPL(topDetailList.id)" title="播放">
                <i>
                  <em></em>播放
                </i>
              </a>
              <a href="javascript:;" class="btn-i btn-add" title="添加到播放列表" @click="switchPL(topDetailList.id)">
              </a>
              <a href="javascript:;" class="btn-i btn-fav">
                <i>{{topDetailList.subscribedCount}}</i>
              </a>
              <a href="javascript:;" class="btn-i btn-share">
                <i>{{topDetailList.shareCount}}</i>
              </a>
              <a href="javascript:;" class="btn-i btn-download">
                <i>下载</i>
              </a>
              <a href="javascript:;" class="btn-i btn-cmt">
                <i>{{topDetailList.commentCount}}</i>
              </a>
            </div>
          </div>
        </div>
        <div class="tp-bd">
          <div class="tb-title">
            <div class="tl">
              <h3>歌曲列表</h3>
              <p>{{topDetailList.trackCount + '首歌'}}</p>
            </div>
            <div class="tr">
              播放：
              <span>{{topDetailList.playCount}}</span>次
            </div>
          </div>
          <div>
            <table class="m-table">
              <thead>
                <tr>
                  <th></th>
                  <th>
                    <div class="wp">
                      标题
                    </div>
                  </th>
                  <th>
                    <div class="wp">
                      时长
                    </div>
                  </th>
                  <th>
                    <div class="wp">
                      歌手
                    </div>
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, i) in topDetailList.tracks" :key="item.id">
                  <td>
                    <span class="num">
                      {{i+1}}
                    </span>
                  </td>
                  <td class="rank">
                    <div class="tt">
                      <a v-if="i <=2" class="lf-bg" :href="'http://localhost:8080/#/song?id=' + item.id">
                        <img :src="item.al.picUrl+'?param=50y50&quality=100'" alt="">
                      </a>
                      <span class="play" @click="addmu(item.id)"></span>
                      <a :href="'http://localhost:8080/#/song?id=' + item.id" class="sn">{{item.name}}&nbsp;</a>
                      <p>- {{item.alia[0]}}</p>
                    </div>
                  </td>
                  <td class="time">
                    <span>
                      {{showTime(item.dt)}}
                    </span>
                    <div class="options show">
                      <a href="javascript:;" @click="addmu(item.id)" class="icon first"></a>
                      <a href="javascript:;" class="icn i-fav"></a>
                      <a href="javascript:;" class="icn i-share"></a>
                      <a href="javascript:;" class="icn i-dl"></a>
                    </div>
                  </td>
                  <td>
                    <div class="overel">
                      <a :href="'http://localhost:8080/#/songer?id=' + item.ar[0].id">{{item.ar[0].name}}</a>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  name: 'TopList',
  data () {
    return {
      characteristicList: [],
      mediaList: [],
      id: 19723756,
      topDetailList: {},
      updateTime: '',
    }
  },
  methods: {
    ...mapMutations(['switchPlayList', 'addMusic']),
    async initTop () {
      const { data: topRes } = await this.$http.get('toplist');
      this.characteristicList = [topRes.list[0], topRes.list[1], topRes.list[2], topRes.list[3]]
      topRes.list.forEach((element, i) => {
        if (i > 3) {
          this.mediaList.push(element)
        }
      });
    },
    gotoTop (val) {
      this.id = val;
      this.getTopDetail()
    },
    async getTopDetail () {
      const { data: tdRes } = await this.$http.get('playlist/detail', {
        params: {
          id: this.id
        }
      })
      this.topDetailList = tdRes.playlist;
      let t = new Date(this.topDetailList.updateTime)
      let m = t.getMonth() + 1
      if (m < 10) {
        m = '0' + m
      }
      let d = t.getDate()
      if (d < 10) {
        d = '0' + d
      }
      this.updateTime = m + '月' + d + '日';
    },
    // 播放时长处理函数
    showTime (val) {
      let m = Math.floor(val / 1000 / 60)
      let s = Math.floor(val / 1000 % 60)
      if (m < 10) {
        m = '0' + m
      }
      if (s < 10) {
        s = '0' + s
      }
      return m + ':' + s
    },
    async switchPL (id) {
      let { data: pl } = await this.$http.get('playlist/detail', {
        params: {
          id: id
        }
      })
      pl = pl.playlist.tracks;
      this.switchPlayList(pl);
      this.$store.dispatch('getlyric', pl[0].id)
    },
    async addmu (id) {
      let { data: mu } = await this.$http.get('song/detail', {
        params: {
          ids: id
        }
      })
      mu = mu.songs
      this.addMusic(mu);
    },
  },
  created () {
    this.getTopDetail()
    this.initTop()
  },
}
</script>

<style lang="less" scoped>
.g-top {
  display: flex;
  background: url("../../assets/wrap3.png") repeat-y 0 0;
}
.tp-l {
  display: flex;
  flex-direction: column;
  width: 240px;
  padding-top: 40px;
}
.tpl-title {
  display: block;
  font-size: 14px;
  width: 100%;
  padding: 0 10px 12px 15px;
}
.tp-mine {
  display: flex;
  cursor: pointer;
  padding: 10px 0 10px 20px;
}
.tp-mine:hover {
  background-color: #f4f2f2;
}
.avtive,
.avtive:hover {
  background-color: #e6e6e6;
}
.tp-item {
  display: inline-block;
  position: relative;
  width: 40px;
  height: 40px;
}
.avatar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  .msk {
    background-position: -310px -330px;
  }
}
.name {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 10px;
}
.tp-2 {
  margin-top: 15px;
}
.tp-r {
  width: 740px;
  padding-bottom: 50px;
}

.tp-hd {
  display: flex;
}
.l-cover {
  position: relative;
  width: 150px;
  height: 150px;
  padding: 3px;
  background-color: #fff;
  border: 1px solid #cccccc;
  .img {
    width: 100%;
  }
  .msk {
    width: 150px;
    height: 150px;
    top: 3px;
    left: 3px;
    background-position: -230px -380px;
  }
}
.r-count {
  margin-left: 40px;
  width: 100%;
}
.r-hd {
  position: relative;
  line-height: 24px;
  margin: 16px 0 4px 0;
  h2 {
    font-size: 20px;
    font-weight: normal;
  }
}
.update {
  display: flex;
  align-items: center;
  margin: 0 0 20px;
  line-height: 35px;
}
.t-icon {
  display: inline-block;
  width: 13px;
  height: 13px;
  background-position: -18px -682px;
}

.tp-bd {
  padding: 0 30px 40px 40px;
  thead {
    tr {
      th {
        height: 38px;
        .wp {
          padding: 8px 10px;
          color: #666666;
          background-position: 0 -56px;
          background-repeat: no-repeat;
        }
        &:nth-child(1) {
          width: 77px;
        }
        &:nth-child(2) {
          width: 326px;
        }
        &:nth-child(3) {
          width: 91px;
        }
        &:nth-child(4) {
          width: 26%;
        }
      }
    }
  }
  tbody {
    td {
      padding: 6px 10px;
      line-height: 18px;
      background-color: #f7f7f7;
      &:nth-child(1) {
        width: 77px;
      }
      &:nth-child(2) {
        width: 326px;
      }
      &:nth-child(3) {
        width: 91px;
      }
      &:nth-child(4) {
        width: 26%;
      }
      .num {
        margin-left: 10px;
        color: #666666;
      }
    }
    .rank {
      padding-top: 10px;
      padding-bottom: 10px;
      .tt {
        display: flex;
        align-items: center;
      }
      .lf-bg {
        display: inline-block;
        width: 50px;
        height: 50px;
        margin-right: 14px;
        img {
          width: 100%;
        }
      }
      .play {
        display: inline-block;
        margin-right: 8px;
        width: 17px;
        height: 17px;
        background-repeat: no-repeat;
        background-position: 0 -103px;
        cursor: pointer;
        &:hover {
          background-position: 0 -128px;
        }
      }
      .sn {
        &:hover {
          text-decoration: underline;
        }
      }
      p {
        color: #beaebe;
      }
    }
    .options {
      float: left;
      .first {
        width: 13px;
        height: 13px;
        background-position: 0 -700px;
        &:hover {
          background-position: -22px -700px;
        }
      }
      .i-fav {
        background-position: 0 -174px;
        &:hover {
          background-position: -20px -174px;
        }
      }
      .i-share {
        background-position: 0 -195px;
        &:hover {
          background-position: -20px -195px;
        }
      }
      .i-dl {
        background-position: -81px -174px;
        &:hover {
          background-position: -104px -174px;
        }
      }
      a {
        float: left;
        width: 18px;
        height: 16px;
      }
    }
    .show {
      display: none;
    }
    .overel {
      a {
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}
tbody tr:hover .time span {
  display: none;
}
tbody tr:hover .time .show {
  display: block;
}
.tb-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 31px;
  border-bottom: 2px solid #c20c0c;
  .tl {
    display: flex;
    h3 {
      font-size: 20px;
      font-weight: normal;
    }
    p {
      margin: 9px 0 0 20px;
      color: #666666;
    }
  }
  .tr {
    span {
      font-weight: 600;
      color: #c20c0c;
    }
  }
}
</style>